import React from 'react';
import styles from './index.less';
import moment from 'moment';
import { Popover } from 'antd';

function addNum(num) {
  if (parseInt(num) < 10) return '0' + num;
  return num;
}

// 随机颜色
var getRandomColor = function() {
  return (
    'rgb(' +
    Math.round(Math.random() * 255) +
    ',' +
    Math.round(Math.random() * 255) +
    ',' +
    Math.round(Math.random() * 10) +
    ')'
  );
};

export default class extends React.Component {
  color = {};
  useColor = {};
  state = {
    initGanttChart: false,
    list: [],
    times: [],
    vesselStartTime: null,
    vesselEndTime: null,
  };
  componentDidMount = async () => {
    this.init();
  };
  init = async () => {
    this.color = {};
    this.initTime();
  };
  initTime = () => {
    const { data } = this.props;
    console.log(data);
    var start = new Date(
      moment(data.vesselStartTime).format('YYYY-MM-DD HH:00:00'),
    ).getTime();
    var end = new Date(
      moment(data.vesselEndTime).format('YYYY-MM-DD HH:00:00'),
    ).getTime();
    var vesselStartTime = moment(start).format('YYYY-MM-DD HH:00:00');
    end += 60 * 1000 * 60; //增加一个小时
    var vesselEndTime = moment(end).format('YYYY-MM-DD HH:00:00');
    this.setState(
      {
        vesselStartTime,
        vesselEndTime,
      },
      () => {
        this.initGanttChart();
      },
    );
  };
  initGanttChart = () => {
    const { data } = this.props;
    const { vesselStartTime, vesselEndTime } = this.state;
    var startTime = new Date(vesselStartTime).getTime();
    var endTime = new Date(vesselEndTime).getTime();

    var num = parseInt((endTime - startTime) / 3600000);
    var times = [];
    for (let i = 0; i < num; i++) {
      times.push(startTime + i * 3600000);
    }

    // 内容数据
    var list = [];
    data.craneWorkList.forEach((item, i) => {
      var obj = {
        bay: item.bay,
        totalWiCount: item.totalWiCount,
        workQueueList: item.workQueueList,
        ...item,
      };
      list.push(obj);
    });
    this.setState({
      list: list,
      times: times,
      initGanttChart: true,
      startTime,
      endTime,
    });
  };
  getColor = craneId => {
    const { colors } = this.props;
    if (!this.color[craneId]) {
      var color = '';
      colors.forEach((item, i) => {
        if (!color && !this.useColor[item]) color = item;
      });
      if (color) {
        this.useColor[color] = color;
        this.color[craneId] = color;
      } else {
        this.color[craneId] = getRandomColor();
      }
    }
    return this.color[craneId];
  };
  render() {
    const { data } = this.props;
    const { list, startTime, endTime, times } = this.state;

    const text = <span>Title</span>;
    const content = (
      <div>
        <p>Content</p>
        <p>Content</p>
      </div>
    );

    return (
      <div className={styles.container} ref={dom => (this.dom = dom)}>
        {this.state.initGanttChart && (
          <div>
            <div className={styles.chart}>
              <div className={styles.dateBg}></div>
              <div className={styles.title}>
                <div style={{ marginTop: '18px' }}>贝位</div>
                <div style={{ marginTop: '18px' }}>任务量</div>
              </div>
              <div className={styles.times}>
                {times.map((item, i) => {
                  var timeStr = moment(item).format('HH: mm');
                  var showDate = timeStr == '00: 00' || i == 0;
                  return (
                    <div className={styles.timeItem} key={i}>
                      <div className={styles.timeText}>{timeStr}</div>
                      <div className={styles.timeText}>-</div>
                      <div className={styles.timeText}>-</div>
                      <div className={styles.timeText}>-</div>
                      {showDate && (
                        <div className={styles.date}>
                          <div className={styles.dateCont}>
                            {moment(item).format('MMM Do')}
                          </div>
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
              <div className={styles.bays}>
                <div className={styles.ship}>
                  {data && (
                    <>
                      {data.vesselDirection == 0 ? (
                        <div className={styles.text}>
                          <div className={styles.textChild}>
                            {data.vesselReference}
                          </div>
                          <div className={styles.triangle}></div>
                        </div>
                      ) : (
                        <div className={styles.text2}>
                          <div className={styles.textChild}>
                            {data.vesselReference}
                          </div>
                          <div className={styles.triangle}></div>
                        </div>
                      )}
                    </>
                  )}
                </div>

                {list.map((item, i) => {
                  var bay = addNum(item.bay);
                  var totalWiCount = addNum(item.totalWiCount);
                  // var totalWiCount =
                  //   parseInt(item.totalWiCount) < 10
                  //     ? '0' + item.totalWiCount
                  //     : item.totalWiCount;

                  return (
                    <div className={styles.bay} key={i}>
                      <div className={styles.bayTitle}>
                        <div className={styles.row1}>
                          <div style={{ borderRight: '1px solid #cccccc' }}>
                            {addNum(item.left?.bay)}
                          </div>
                          <div>{addNum(item.right?.bay)}</div>
                        </div>
                        <div className={styles.row1}>
                          <div>{bay}</div>
                        </div>
                        <div className={styles.row1}>
                          <div style={{ borderRight: '1px solid #cccccc' }}>
                            {addNum(item.left?.totalWiCount)}
                          </div>
                          <div>{addNum(item.right?.totalWiCount)}</div>
                        </div>
                        <div className={styles.row1}>
                          <div>{totalWiCount}</div>
                        </div>

                        {/* <div className={styles.text1}>
                          <div>{bay}</div>
                          <div>{totalWiCount}</div>
                        </div> */}
                      </div>

                      <div className={styles.links}>
                        {item.workQueueList.map((ite, i) => {
                          // 算出高度
                          var start = new Date(ite.startWorkTime).getTime();
                          var end = new Date(ite.endWorkTime).getTime();
                          var height = ((end - start) / (endTime - startTime)) * 100;

                          // 算出top距离
                          var top = ((start - startTime) / (endTime - startTime)) * 100;

                          var style = {
                            height: `calc(${height + 0.125}% + 0px)`,
                            top: `calc(${top}% + 0px)`,
                            backgroundColor: this.getColor(ite.craneId),
                          };
                          return (
                            <Popover
                            placement="right"
                              // placement="rightTop"
                              title={null}
                              trigger="click"
                              visible={true}
                              overlayClassName={styles.aa}
                              content={
                                <div>
                                <div>start:{moment(ite.startWorkTime).format('HH:mm')}</div>
                                <div>end:{moment(ite.endWorkTime).format('HH:mm')}</div>
                                <div>方式:{ite.qldtype == 'LOAD' ? '装':'卸'}</div>
                                <div>吊:{ite.craneId}</div>
                                <div>量:{ite.workInstructionCount}</div>
                                </div>
                              }
                            >
                              <div
                                className={styles.link}
                                style={style}
                                key={i}
                              >
                                {/* {ite.qldtype == 'LOAD' ? (
                                  <div className={styles.triangle}></div>
                                ) : (
                                  <div className={styles.triangle2}></div>
                                )}
                                <div>{ite.craneId}</div>
                                <div>{ite.workInstructionCount}</div> */}
                              </div>
                            </Popover>
                          );
                        })}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }
}
